<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:include="/shop/include :: header"></head>
    <body>
        <form class="layui-form" action="" lay-filter="shop_menu-update-form" style="margin-top: 20px;">
            <div class="layui-fluid">
                <div class="layui-card">
                    <div class="layui-card-body" style="padding: 15px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">请选择菜单级别</label>
                            <div class="layui-input-block">
                                <select name="level" id="level" lay-verify="required|level" autocomplete="off"
                                        placeholder="请选择分类" lay-filter="level"
                                        class="layui-input" required="required">
                                    <option value="">请选择菜单级别</option>
                                    <option value="1">一级</option>
                                    <option value="2">二级</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item" id="doneLevelId" style="display: none">
                            <label class="layui-form-label">请选择一级菜单</label>
                            <div class="layui-input-block">
                                <select name="levelOfOne" id="oneSelect" autocomplete="off"
                                        placeholder="请选择一级菜单" lay-filter="oneLevelId"
                                        class="layui-input">
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">请输入权限名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="menuName" id="menuName" lay-verify="required|name"
                                       autocomplete="off"
                                       placeholder="请输入权限名称"
                                       class="layui-input" required="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">请输入权限权重</label>
                            <div class="layui-input-block">
                                <input type="number" name="weight" id="weight" lay-verify="required|weight"
                                       autocomplete="off"
                                       placeholder="请输入权限权重"
                                       class="layui-input" required="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">请输入权限地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="menuUrl" id="menuUrl"
                                       autocomplete="off"
                                       placeholder="请输入权限地址"
                                       class="layui-input" required="required">
                            </div>
                        </div>
                        <!--  -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">启用状态：</label>
                            <div class="layui-input-block">
                                <select name="enableState" id="enableState" lay-filter="enableState">
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-layout-admin">
                            <div class="layui-input-block">
                                <div class="layui-footer" style="left: 0;">
                                    <button class="layui-btn" lay-submit="" lay-filter="shop_menu-add">立即提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div th:include="/shop/include :: footer"></div>
        <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
        <script>
            layui.use(['layer', 'jquery', 'form', 'laydate', 'dict'], function () {
                var $ = layui.jquery;
                var laydate = layui.laydate;
                var layer = layui.layer;
                var form = layui.form;
                var dict = layui.dict;

                dict.setSelect("enableState", "enableState");
                $.ajax({
                    url: '/platform/menu/selectMenuOfOne',
                    type: "get",
                    async: false,
                    success: function (result) {
                        if (result.status == "SUCCESS") {
                            if (result.data != null) {
                                var $html = "";
                                $.each(result.data, function (index, item) {
                                    $html += "<option value='" + item.id + "'>" + item.menuName + "</option>";
                                });
                                $("#oneSelect").append($html);
                                form.render('select');
                            }
                        } else {
                            layer.msg(result.message)
                        }
                    }
                });

                /*监听下拉框*/
                form.on('select(level)', function (dataObj) {
                    var value = $("#level").val();
                    if (value == 1) {
                        $("#doneLevelId").css('display', 'none');
                    }
                    if (value == 2) {
                        $("#doneLevelId").css('display', 'block');
                    }
                });

                //监听提交
                form.on('submit(shop_menu-add)', function (data) {
                    $.ajax({
                        url: '/platform/menu/add',
                        type: "post",
                        data: JSON.stringify(data.field),
                        contentType: 'application/json; charset=utf-8', // 很重要
                        async: false,
                        success: function (result) {
                            if (result.status == "SUCCESS") {
                                layer.msg(result.message, {
                                    offset: '15px'
                                    , icon: 1
                                    , time: 1000
                                }, function () {
                                    window.parent.location.reload();
                                });
                            } else {
                                layer.msg(result.message)
                            }
                        }
                    });
                    return false;
                });
            });
        </script>
    </body>
</html>